<template>
    <Box>
		<div id="m1_r1_ecs" />
	</Box>
</template>

<script setup>
import Box from '@com1/Box.vue';
import * as ecs from 'echarts';
import { m1Store } from '@st/m1';
import { onMounted } from 'vue';

const m1 = m1Store();

onMounted(() => {
    const chart = ecs.init(document.getElementById('m1_r1_ecs'));
    chart.setOption({
        globe: {
            baseTexture: '',
            top: 'middle',
            left: 'center',
            displacementScale: 0,
            environment: 'none',
            shading: 'color',
            viewControl: {
                distance: 300,
                autoRotate: true,
                autoRotateAfterStill: 0,
            }
        }
    })
})
</script>

<style lang="less" scoped>
@import "@less";

#m1_r1_ecs {
    .size(100%, 300px);
}
</style>